{% comment %}
    Renders an article card for a given blog with settings to either show the image or not.
    Accepts:
    - article: {Object} Article object
    - posts_per_row: {String} 一行最多展示的博客数量
    - show_featured_image: {String} 是否展示博客封面
    - show_date: {String} 是否展示发布日期
    - show_author: {String} 是否展示作者
    - show_excerpt: {String} 是否展示摘要
    - show_button: {String} 是否展示博客超链接按钮
    Usage:
    {% render 'featured-blog-card', 
      article: article, 
      posts_per_row: posts_per_row, 
      show_featured_image: section.settings.show_featured_image, 
      show_date: section.settings.show_date, 
      show_author: section.settings.show_author, 
      show_excerpt: section.settings.show_excerpt, 
      show_button: section.settings.show_button
    %}
{% endcomment %}
{% liquid
  if posts_per_row == '2'
    assign card_style_class = 'post-style-one'
    assign img_sizes = '(min-width: 1264px) 588px, (min-width: 1024px) 468px, (min-width: 768px) 240px, (min-width: 600px) 32vw, calc(100vw - 32px)'
  elsif posts_per_row == '3'
    assign card_style_class = 'post-style-two'
    assign img_sizes = '(min-width: 1264px) 384px, (min-width: 1024px) 304px, (min-width: 768px) 240px, (min-width: 600px) 32vw, calc(100vw - 32px)'
  endif

  if show_featured_image and article.image
    assign card_wrap_col_class = 'col-12'
  else
    assign card_wrap_col_class = 'col-12'
  endif
  %}
<article class="h-100 {{ card_style_class }}" aria-labelledby="Article-{{ article.id }}">
  <div class="card pb-md-0 pb-6 border-0 bg-transparent h-100">
    <div class="row g-0 flex-column h-100">
      {%- if show_featured_image == true -%}
        {%- if article != blank -%}
          {%- if article.image -%}
            <div class="col-12">
              <div class="card-img-container ratio mb-3 overflow-hidden rounded" style="--se-aspect-ratio: {{ 1 | divided_by: 1.5 | times: 100 }}%;">
                {{ article.image.src | image_url: width: article.image.width | image_tag: loading: "lazy", class: "object-fit-cover card-img img-fluid", sizes: img_sizes }}
                <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} class="stretched-link" href="{{ article.url }}"></a>
              </div>
            </div>
          {%- endif -%}
        {%- else -%}
          <div class="col-12">
            <div class="card-img-container ratio mb-3 overflow-hidden object-fit-cover border rounded" style="--se-aspect-ratio: {{ 1 | divided_by: 1.5 | times: 100 }}%;">
              {{ 'image' | placeholder_svg_tag }}
            </div>
          </div>
        {%- endif -%}
      {%- endif -%}
      <div class="d-flex flex-grow-1 flex-column pb-0 pb-md-1 {{ card_wrap_col_class }}">
        <div class="px-0 py-0">
          <div class="mb-2 post-author-date">
            {% render 'article-author-date-tag',
              article: article,
              show_author: show_author,
              show_date: show_date
            %}
          </div>
          
          <div class="position-relative">
            {%- if article != blank -%}
              <h3 class="mb-0 fw-bold post-title" id="Article-{{ article.id }}">{{ article.title | escape }}</h3>
            {%- else -%}
              <h3 class="mb-0 fw-bold post-title" id="Article-{{ article.id }}">{{ 'sections.blog_posts.onboarding_title' | t }}</h3>
            {%- endif -%}

            {%- if show_excerpt -%}
              {%- if article != blank -%}
                {%- if article.excerpt.size > 0 -%}
                <p class="mt-1 mb-0 ellipsis-3">
                  {{ article.excerpt | strip_html | truncatewords: 60 }}
                </p>
                {%- endif -%}
              {%- else -%}
                <p class="mt-1 mb-0 ellipsis-3">{{ 'sections.blog_posts.onboarding_content' | t }}</p>
              {%- endif -%}
            {%- endif -%}
            
            {%- if article != blank -%}
            <a class="stretched-link h5" {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}"></a>
            {%- endif -%}
          </div>
        </div>
        
        {%- if show_button and article != blank -%}
        <div class="mt-2">
          <a class="post-link position-relative btn btn-link link-primary" {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}">{{ 'sections.blog_posts.read_more' | t }}</a>
        </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</article>